<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>reveal-md</title>
    <link rel="stylesheet" href="./css/reveal.css" />
    <link rel="stylesheet" href="./css/theme/league.css" id="theme" />
    <link rel="stylesheet" href="./css/highlight/zenburn.css" />
    <link rel="stylesheet" href="./css/print/paper.css" type="text/css" media="print" />

  </head>
  <body>
    <div class="reveal">
      <div class="slides"><section  data-markdown><script type="text/template">### framework7开发实践(下)
分享人：张航晨
</script></section><section  data-markdown><script type="text/template">###  目录
- swiper slider(轮播图)
- calendar(日历)
- dialog(对话框)
- infinite scroll(无限滚动)
- lazy load(懒加载)
- picker(选择器)
- pull to refresh(下拉刷新)
- popup(弹框)
</script></section><section  data-markdown><script type="text/template">

### swiper slider(轮播图)
#### html布局
<font size=6>

```html
<!-- Slider container -->
<div class="swiper-container">
    <!-- Slides wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ... other slides ...
    </div>
    <!-- Pagination, if required -->
    <div class="swiper-pagination"></div>
</div>
```
<font size=4>

- swiper-container - 带滑块和分页的主滑块容器。必需元素
- swiper-wrapper - 幻灯片的附加包装。必需元素
- swiper-slide - 单个滑动元素。可以包含任何HTML内部
- swiper-pagination - 带有分页子弹的容器。请注意，将自动创建分页项目符号。可选元素
</script></section><section  data-markdown><script type="text/template">
#### app方法

- app.swiper.create（swiperEl，parameters）- 使用选项初始化滑块
- app.swiper.destroy（swiperEl）- 销毁Swiper实例
- app.swiper.get（swiperEl）- 通过HTML元素获取Swiper实例

<font size=5>

>请注意，Framework7的Swiper版本不包含键盘，历史记录，哈希导航和鼠标滚轮模块，因为它们只是桌面的东西
</script></section><section  data-markdown><script type="text/template">
#### 自动初始化
<font size=6>

如果您不需要使用Swiper API并且您的Swiper在页面内部并在页面初始化时在DOM中显示，那么只需添加其他swiper-init类就可以自动初始化它：
```html
<!-- swiper-init to initialize swiper automatically -->
<div class="swiper-container swiper-init" data-speed="400" data-space-between="40" data-swiper='{"speed":"400", "spaceBetween":"40"}'>
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ... other slides ...
    </div>
</div>
```
在这种情况下，如果您需要访问创建的Swiper实例，可以使用app.swiper.getapp方法：
```js
var swiper = app.swiper.get('.swiper-container');
swiper.slideNext();
```</script></section><section  data-markdown><script type="text/template">
### calendar(日历)

日历是一种触摸优化组件，提供了一种处理日期的简便方法。
日历可用作内联组件或叠加。 平板电脑日历将自动转换为平板电脑上的Popover（iPad）。
</script></section><section  data-markdown><script type="text/template">
#### 日历方法

- app.calendar.create（parameters） - 创建Calendar实例
- app.calendar.destroy（el） - 销毁日历实例
- app.calendar.get（el） - 按HTML元素获取Calendar实例
- app.calendar.close（el） - 关闭日历
```js
var calendar = app.calendar.create({
    inputEl: '#calendar-input'
});
```
</script></section><section  data-markdown><script type="text/template">
### 日历参数
<font size=4>

参数|类型|默认值|说明
-|-|-|-
calendarType | string | gregorian | 日历类型，可以是格里高利或贾拉利
value| array || 具有初始选定日期的数组。 每个数组项表示选定的日期
disabled| Date Range| | 额外的禁用日期。 参数接受所谓的日期范围（详见下文）
events| Date Range| |有事件的日期。 在日历日将标有额外的“点”。 参数接受所谓的日期范围（详见下文）。如果您想指示当天有几个不同的事件，可以用多个不同的颜色点来指示这一点。 在这种情况下，您需要将日期范围作为数组传递，其中每个对象将具有日期和颜色属性。
rangesClasses| array| | 您希望为其他样式添加自定义CSS类的日期范围
formatValue| function (values)| | 格式化输入值的函数，应返回新的/格式化的字符串值。 values是每个项目代表所选日期的数组
monthNames| array| ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December'] | 具有完整月份名称的数组
</script></section><section  data-markdown><script type="text/template">
<font size=4>

参数|类型|默认值|说明
-|-|-|-
monthNamesShort | array| ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']| 短的月份名称的数组
dayNames| array| ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] | 带有工作日名称的数组
dayNamesShort| array| ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']| 带有工作日短名称的数组
firstDay| number| 1| 一周的第一天。 默认情况下1 - 星期一
weekendDays| array| [0, 6]| 索引号为周末天数的数组，默认为星期六和星期日
dateFormat| string | 'yyyy-mm-dd'| 默认的日期格式，可用表达式：

- 'yyyy' - 年份4位数
- 'yy' - 年份2位数
- 'mm' - 2位数月份数，从01到12
- 'm' - 月份编号，从1到12
- 'MM' - 全月名称
- 'M' - 短月名
- 'dd' - 2位数日期，从01到31
- 'd' - 天数，从1到31
- 'DD' - 完整的工作日名称
- 'D' - 短工作日名称
</script></section><section  data-markdown><script type="text/template">
<font size=4>

参数|类型|默认值|说明
-|-|-|-
multiple| boolean| false| 允许选择多个日期/值
rangePicker| boolean| false| 启用范围选择器。与multiple不兼容
rangePickerMinDays| number| 1| 启用rangePicker时需要选择的最小天数
rangePickerMaxDays| number| 0| 启用rangePicker时允许选择的最大天数。 0表示没有最大值
direction | string| 'horizontal' | 月份布局方向，可以是“水平”或“垂直”
minDate| Date| null| 允许的最短日期
maxDate| Date| null| 允许的最大日期
touchMove| boolean| true| 如果启用，则在触摸移动期间，日历月滑动跟随手指
animate| boolean| true| 启用不同月份之间的过渡
closeOnSelect| boolean| false| 当用户选择日期时，将关闭日历
weekHeader| boolean| true| 启用具有短名称工作日的周标题
monthSelector| boolean| true| 在工具栏中启用月选择器
yearSelector| boolean| true| 在工具栏中启用年份选择器
</script></section><section  data-markdown><script type="text/template">
<font size=2>

容器/开启器特定的参数

参数|类型|默认值|说明
-|-|-|-
containerEl| string/HTMLElement| | 带有CSS选择器或HTMLElement的字符串，用于放置生成的Calendar HTML。 仅用于内联日历
openIn| string| auto| 可以是auto，popover（在popover中打开日历），sheet（在工作表模式中打开）或customModal（在自定义Calendar模式覆盖中打开）。 如果auto将在小屏幕上以sheet模式打开，在大屏幕上以popover打开。
inputEl| string或HTMLElement| |带有CSS选择器的字符串或带有相关输入元素的HTMLElement
scrollToInput| boolean| true| 滚动视口（页面内容）以在打开日历时输入
inputReadOnly| boolean| true| 在指定的输入上设置“readonly”属性
cssClass| string| | 要在calendar元素上设置的其他CSS类名
closeByOutsideClick| boolean| true| 如果启用，将通过单击选择器或相关输入元素外部来关闭选择器
toolbar| boolean| true| 启用日历工具栏
toolbarCloseText| string| Done | "完成/关闭"工具栏按钮的文本
header| boolean| false| 启用日历标题
headerPlaceholder| string| Select date| 默认日历标题占位符文本
routableModals| boolean| true| 将打开的日历添加到路由器历史记录，通过返回路由器历史记录并将当前路由设置为日历模式来关闭日历
url| string| date/ |  Calendar模式URL，将设置为当前路由
view| object| | 查看启用routableModals时设置路由的位置。 如果未找到父视图，则默认为inputEl或主视图的父视图
backdrop| boolean| | 启用日历背景（后面的深半透明层）。 默认情况下，仅在Popover中打开日历时启用它。
closeByBackdropClick| boolean| true| 启用后，将在背景单击时关闭日历
</script></section><section  data-markdown><script type="text/template">
渲染函数

<font size=4>

参数|类型|说明
-|-|-
renderWeekHeader| function| 渲染周标题的函数。 必须返回周标题HTML字符串
renderMonths| function（date）| 用于渲染月份包装器的函数。 必须返回月份容器的完整HTML字符串
renderMonth| function（日期，偏移量）| 渲染单个月的函数。 必须返回单月HTML字符串
renderMonthSelector| fucntion |用于渲染月选择器的函数。 必须返回月份选择器HTML字符串
renderYearSelector| function| 渲染年份选择器的函数。 必须返回年份选择器HTML字符串
renderHeader| function| 渲染日历标题的函数。 必须返回日历标题HTML字符串
renderToolbar| function| 用于渲染工具栏的函数。 必须返回工具栏HTML字符串
render| function| 渲染整个日历的功能。 必须返回日历完整的HTML字符串
</script></section><section  data-markdown><script type="text/template">
#### Date Range

<font size=4>

一些Calendar参数（disabled，events和rangesClasses）接受所谓的Date Range。 这是一种指定和涵盖所有可能日期组合的简单方法。
它可以是带日期的数组，例如：
```
disabled: [new Date(2015, 10, 10), new Date(2015, 10, 11)],
```
它可以是自定义函数，您需要返回true或false
```
disabled: function (date) {
        if (date.getFullYear() === 2015 && date.getMonth() === 10) {
            return true;
        }
        else {
            return false;
        }
    },
```
或者使用from和to属性对象
```
disabled: {
        from: new Date(2015, 9, 1),
        to: new Date(2015, 11, 31)
    },
disabled: {
        from: new Date(2015, 11, 1)
    },
```
或具有date属性的对象：
```
disabled: {
        date: new Date(2015, 11, 1)
    },
```
或者具有混合日期和对象的数组
</script></section><section  data-markdown><script type="text/template">
#### 日历方法

<font size=4>

方法|说明
-|-
calendar.setValue(values)| 设置新选择的日期。 values是每个项目代表所选日期的数组
calendar.getValue()| 返回当前日历值
calendar.addValue()| 向值数组添加值。 如果启用了多个选择(使用multiple：true参数)| ，则有用
calendar.update()| 重新呈现日历。 在您动态添加/更改值并需要更新日历布局的情况下很有用
calendar.nextMonth(duration)| 以ms为单位的指定持续时间的日历转换到下个月
calendar.prevMonth(duration)| 以ms为单位的指定持续时间的日历过渡到上个月
calendar.nextYear()| 日历过渡到明年
calendar.prevYear()| 日历过渡到上一年
calendar.setYearMonth(年，月，持续时间)| 日历转换到指定的年份，指定持续时间的月份，以毫秒为单位
calendar.open()| 打开日历
calendar.close()| 关闭日历
calendar.destroy()| 销毁日历实例并删除所有事件
calendar.on(event，handler)| 添加事件处理程序
calendar.once(event，handler)| 添加在触发后将被删除的事件处理程序
calendar.off(event，handler)| 删除事件处理程序
calendar.off(event)| 删除指定事件的所有处理程序
calendar.emit(event，... args)| 实例上的Fire事件
</script></section><section  data-markdown><script type="text/template">
#### 事件

<font size=4>

Calendar实例在自我实例和app程序实例上发出事件。 应用程序实例事件具有以calendar为前缀的相同名称。

<font size=2>

事件| 目标| 参数| 说明
-|-|-|-
dayClick| calendar|（日历，dayEl，年，月，日）|点击日历日元素后将触发事件
calendarDayClick| app
change| calendar|（日历，值）| 日历值更改时将触发事件
calendarChange| app
monthAdd| calendar|（calendar，monthEl）| 添加新月HTML布局时将触发事件。 如果您需要后处理添加的html元素，这很有用
calendarMonthAdd| app
monthYearChangeStart| calendar|（日历，年，月）| 事件将在过渡到下个月的过程中触发
calendarMonthYearChangeStart| app
monthYearChangeEnd| calendar|（日历，年，月）| 事件将在转换到下个月后触发
calendarMonthYearChangeEnd| app
init| calendar|（日历）初始化日历时将触发事件
calendarInit| app
open| calendar|（日历）|当Calendar启动其开始动画时将触发事件。 作为参数，事件处理程序接收日历实例
calendarOpen| app
opened | calendar|（日历）|事件将在Calendar完成其打开动画后触发。 作为参数，事件处理程序接收日历实例
calendarOpened| app
close| calendar|（日历）| 当Calendar开始关闭动画时将触发事件。 作为参数，事件处理程序接收日历实例
calendarClose| app
closed| calendar|（日历）| 事件将在Calendar完成其关闭动画后触发。作为参数，事件处理程序接收日历实例
calendarClosed| app
beforeDestroy| calendar|（calendar）| 将在销毁Calendar实例之前触发事件。 作为参数，事件处理程序接收日历实例
calendarBeforeDestroy| app
</script></section><section  data-markdown><script type="text/template">
### dialog(对话框)

#### 对话应用方法
- app.dialog.create（参数） - 创建Dialog实例
- app.dialog.destroy（el） - 销毁Dialog实例
- app.dialog.get（el） - 通过HTML元素获取Dialog实例
- app.dialog.open（el，animate） - 打开Dialog
- app.dialog.close（el，animate） - 关闭对话框
</script></section><section  data-markdown><script type="text/template">
#### 对话框参数

<font size=4>

参数 | 类型 | 默认 | 描述
-|-|-|-
el | HTML元素 |  | 对话框元素。如果您已在HTML中使用Dialog元素并希望使用此元素创建新实例，则可能很有用
backdrop | boolean | true | 启用对话框背景（后面的深色半透明层）
closeByBackdropClick | boolean | true | 启用后，将在单击背景时关闭对话框
animate | boolean | true | 是否应该使用动画打开/关闭对话框。可以覆盖.open()和.close()方法
title | string |  | 对话标题
text | string |  | 对话框内部文字
content | string |  | 对话框文本后面的自定义对话框内容
buttons | array | [] | 带对话框按钮的数组
verticalButtons | boolean | false | 启用垂直按钮布局
destroyOnClose | boolean | false | 启用后会在关闭时自动销毁Dialog
onClick | function（对话框，索引） |  | 单击“对话框”按钮后将执行的回调函数。作为参数，它接收对话框实例并单击按钮索引号
cssClass | string |  | 要添加的其他css类
on | object |  | 具有事件处理程序的对象。
</script></section><section  data-markdown><script type="text/template">
#### 按钮参数

<font size=5>

buttons数组中的每个Button 必须显示为具有按钮参数的对象：

参数 | 类型 | 默认 | 描述
-|-|-|-
text | string |  | 带有Button文本的字符串（可以是HTML字符串）
bold | boolean | false | 启用粗体按钮文本
color | string |  | 按钮颜色，默认颜色之一
close | boolean | true | 如果启用，则单击按钮将关闭对话框
cssClass | string |  | 附加按钮CSS类
keyCodes | array | [] | 带键盘键码的数组，用于触发按钮点击。例如，键代码13表示按Enter键将触发按键单击
onClick | function（对话框，e） |  | 单击此按钮后将执行的回调函数
</script></section><section  data-markdown><script type="text/template">
#### 实例方法

<font size=5>

方法|解释
-|-
dialog.open（animate）| 打开对话框
| | animate - boolean（默认情况下true） - 定义是否应该使用动画打开它
dialog.close（animate）| 关闭对话框
| | animate - boolean（默认情况下true） - 定义是否应该使用动画关闭它
dialog.setProgress（进度，持续时间）| 使用Dialog Progress快捷方式时设置对话框进度
| | 进度 - 数字 - 进度条进度（从0到100）
| | 持续时间 - 数字（以毫秒为单位） - 进度条进度更改持续时间
dialog.setTitle（标题）| 设置对话框的标题
| | title - 字符串 - 新对话框标题
dialog.setText（text）| 设置对话框的文本
| | title - 字符串 - 新对话框文本
dialog.destroy（）| 销毁对话框
dialog.on（event，handler）| 添加事件处理程序
dialog.once（event，handler）| 添加将在触发后删除的事件处理程序
dialog.off（事件，处理程序）| 删除事件处理程序
dialog.off（事件）| 删除指定事件的所有处理程序
dialog.emit（event，... args）| 实例上的火灾事件
</script></section><section  data-markdown><script type="text/template">
#### 事件

<font size=5>

应用和对话实例事件
Dialog实例在自我实例和应用程序实例上发出事件。应用程序实例事件具有相同的名称前缀dialog。

事件 | 描述
-|-
open | 当Dialog开始打开动画时，将触发事件。作为参数事件处理程序接收对话框实例
opened | Dialog完成其开始动画后将触发事件。作为参数事件处理程序接收对话框实例
close | 当Dialog开始关闭动画时，将触发事件。作为参数事件处理程序接收对话框实例
closed | Dialog完成结束动画后将触发事件。作为参数事件处理程序接收对话框实例
beforeDestroy | 事件将在Dialog实例被销毁之前触发。作为参数事件处理程序接收对话框实例
</script></section><section  data-markdown><script type="text/template">
#### 快捷方式

<font size=4>

- app.dialog.alert（text，title，callback） - 创建警报对话框并打开它
- app.dialog.alert（text，callback） - 使用默认标题创建警报对话框并将其打开
- app.dialog.confirm（text，title，callbackOk，callbackCancel） - 创建确认对话框并打开它
- app.dialog.confirm（text，callbackOk，callbackCancel） - 使用默认标题创建确认对话框并将其打开
- app.dialog.prompt（text，title，callbackOk，callbackCancel，defaultValue） - 创建提示对话框并打开它
- app.dialog.prompt（text，callbackOk，callbackCancel，defaultValue） - 使用默认标题创建提示对话框并将其打开
- app.dialog.login（text，title，callbackOk，callbackCancel） - 创建登录对话框并打开它
- app.dialog.login（text，callbackOk，callbackCancel） - 创建具有默认标题的登录对话框并打开它
- app.dialog.password（text，title，callbackOk，callbackCancel） - 创建密码对话框并打开它
- app.dialog.password（text，callbackOk，callbackCancel） - 使用默认标题创建密码对话框并将其打开
- app.dialog.preloader（title，color） - 创建预加载器对话框并将其打开
- app.dialog.progress（标题，进度，颜色） - 创建进度对话框并打开它
</script></section><section  data-markdown><script type="text/template">
### infinite scroll(无限滚动)
无限滚动允许在页面滚动接近底部时加载其他内容或执行任何其他所需操作。
</script></section><section  data-markdown><script type="text/template">
#### 无限滚动布局

<font size=5>

要启用Infinite Scroll，您需要向infinite-scroll-content任何可滚动容器添加其他类，特别是我们的页面滚动区域 - `<div class="page-content">`：
```html
<div class="page">
    <div class="page-content infinite-scroll-content infinite-scroll-top">
        ...
        <div class="preloader infinite-scroll-preloader"></div>
    </div>
</div>
```
- `div class="page-content infinite-scroll-content"` 我们的无限滚动容器
- `data-infinite-distance` 属性允许配置距页面底部（以px为单位）的距离以触发无限滚动事件。默认情况下，如果未指定，则为50（px）
- `div class="preloader infinite-scroll-preloader"` 具有少量其他样式的预加载器，可与无限滚动一起使用
</script></section><section  data-markdown><script type="text/template">
#### 无限滚动方法

<font size=5>

- app.infiniteScroll.create（el）- 向指定的HTML元素添加无限滚动事件侦听器
>仅在您在页面初始化后添加了无限滚动内容或者稍后要启用它时，才使用此方法。否则，如果页面init上有“infinite-scroll-content”元素，它将自动创建
- app.infiniteScroll.destroy（el）- 从指定的HTML容器中删除无限滚动事件侦听器
</script></section><section  data-markdown><script type="text/template">
#### 事件

<font size=5>

事件 | 目标 | 描述
- | - | -
infinite | 无限滚动容器 `<div class =“page-content infinite-scroll-content”>` 或者app | 当页面滚动到达指定（在数据距离属性中）到底部的距离时，将触发事件。
</script></section><section  data-markdown><script type="text/template">
### 延迟加载
Lazy Load会延迟在视口外部加载图像，直到用户滚动到视口。
它将使页面加载更快，提高滚动性能并节省流量
>请注意，延迟图像和元素应该在可滚动内部`<div class="page-content">`才能正常工作
</script></section><section  data-markdown><script type="text/template">
#### 用法

<font size=5>

- 用作`<img>`
要在图像上使用延迟加载：
  1. 将图像源指定为data-src属性而不是src属性
  2. 将lazy类添加到图像
```
<div class="page-content">
  ...
  <img data-src="path/to/image.jpg" class="lazy">
  ...
</div>
```

- 用作`background`
  1. 将元素的背景图像源指定为 data-background
  2. 将lazy类添加到元素
```
<div class="page-content">
  ...
  <div data-background="path/to/image.jpg" class="lazy">
      ...
  </div>
  ...
</div>
```
如果要在加载图像时添加淡入效果，则需要`lazy-fade-in`向图像/元素添加类：
</script></section><section  data-markdown><script type="text/template">
#### 参数

<font size=5>

通过在参数下传递延迟加载相关参数，可以使用全局app参数控制一些默认的延迟加载行为lazy：

参数 | 类型 | 默认 | 描述
-|-|-|-
placeholder | string|  | 延迟加载图像占位符源，以便在图像尚未加载时显示。默认情况下，它是1x1像素图像
threshold | number | 0 | 默认情况下，图像在屏幕上显示时会加载。如果要先加载图像，请使用此参数。将其设置为50将在视口出现之前50像素时加载图像
sequential | boolean | true | 如果启用，则当它们出现在视口中时，将逐个加载延迟图像
observer | boolean | true | 如果启用，如果浏览器支持，它将使用Intersection Observer。
</script></section><section  data-markdown><script type="text/template">
#### 事件

<font size=5>

事件 | 目标 | 描述
-|-|-
lazy:load | 懒元素 <... class =“lazy”> | 将在图像文件加载开始时触发事件
lazy:loaded | 懒元素 <... class =“lazy”> | 成功加载图像文件后将触发事件
lazy:error | 懒元素 <... class =“lazy”> | 如果加载图像文件时出错，将触发事件

手动触发

<font size=5>

可以通过触发lazy延迟图像/元素上的事件来强制延迟处理程序检查延迟图像。如果您动态添加了懒惰元素并且想要在不滚动页面的情况下检查它们是否加载，则它非常有用。例如：
```js
$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');
```
</script></section><section  data-markdown><script type="text/template">
### picker(选择器)
Picker是一个功能强大的组件，允许您创建自定义重叠选择器，看起来像iOS原生的选择器。
Picker可用作内联组件或叠加层。平板电脑上的选择器将自动转换为平板电脑上的Popover（iPad）。
</script></section><section  data-markdown><script type="text/template">
#### Picker App方法
- app.picker.create（参数） - 创建Picker实例
- app.picker.destroy（el） - 销毁Picker实例
- app.picker.get（el） - 通过HTML元素获取Picker实例
- app.picker.close（el） - 关闭选择器
</script></section><section  data-markdown><script type="text/template">
#### picker参数

<font size=4>

参数 | 类型 | 默认 | 描述
-|-|-|-
rotateEffect | boolean | true | 启用3D旋转效果
momentumRatio | number | 7 | 在快速触摸和移动后释放拾取器时，较大的值会产生更大的动量
mousewheel | boolean | true | 能够使用鼠标滚轮滚动选择器值
updateValuesOnMomentum | boolean | false | 在动量期间更新选择器和输入值
updateValuesOnTouchmove | boolean | true | 触摸移动期间更新选择器和输入值
updateValuesOnMousewheel | boolean | true | 在鼠标滚轮滚动期间更新选取器和输入值
freeMode | boolean | false | 禁用对值的捕捉
value | array |  | 具有初始值的数组。每个数组项表示相关列的值
formatValue | function（values，displayValues） |  | 格式化输入值的函数，应返回新的/格式化的字符串值。values和displayValues是数组，其中每个项表示相关列的值/显示值
cols | array |  | 带列的数组。每个数组项表示具有列参数的对象
</script></section><section  data-markdown><script type="text/template">
#### 容器/开启器特定的参数

<font size=3>

参数 | 类型 | 默认 | 描述
-|-|-|-
containerEl | string HTMLElement |  | 具有CSS选择器或HTMLElement的字符串，用于放置生成的Picker HTML。仅用于内联选择器
openIn | string | 汽车 | 可以auto，popover（打开popover中的选择器），sheet（以单张模式打开）。如果auto将在小屏幕上打开单张模式并在大屏幕上打开弹出窗口。
inputEl | string或HTMLElement |  | 带有CSS选择器的字符串或带有相关输入元素的HTMLElement
scrollToInput | boolean | true | 滚动视口（页面内容）以在选择器打开时输入
inputReadOnly | boolean | true | 在指定的输入上设置“readonly”属性
cssClass | string |  | 要在picker元素上设置的附加CSS类名
closeByOutsideClick | boolean | true | 如果启用，将通过单击选择器或相关输入元素外部来关闭选择器
toolbar | boolean | true | 启用选择器工具栏
toolbarCloseText | string | 完成 | 完成/关闭工具栏按钮的文本
routableModals | boolean | true | 将打开的选择器添加到路由器历史记录中，通过返回路由器历史记录并将当前路由设置为选择器模式，可以关闭选择器
url | string | 选择/ | 将设置为当前路由的Picker模式URL
view | object |  | 查看routableModals启用时设置路由的位置。inputEl如果未找到父视图，则默认为父视图或主视图
renderToolbar | function |  | 渲染工具栏的功能。必须返回工具栏HTML字符串
render | function |  | 用于渲染整个选择器的函数。必须返回选择器完整的HTML字符串
</script></section><section  data-markdown><script type="text/template">
#### 列参数

<font size=5>

参数 | 类型 | 默认 | 描述
-|-|-|-
values | array |  | 具有字符串列值的数组
displayValues | array |  | 具有将在Picker中显示的字符串列值的数组。如果未指定，它将显示值参数的值
cssClass | string |  | 要在列HTML容器上设置的其他CSS类名
textAlign | string |  | 列值的文本对齐方式可以是“左”，“中”或“右”
width | number |  | 列宽以px为单位。如果您需要使用依赖列修复选择器中的列宽，则非常有用。默认情况下，自动计算
divider | boolean | false | 定义应该用作可视分隔符的列，该列没有任何值
content| string |  | 应该为divider-column（divider:true）指定列的内容
onChange | function（picker，value，displayValue） |  | 选择器值更改时将执行的回调函数。
</script></section><section  data-markdown><script type="text/template">
#### 方法

<font size=4>

方法|说明
-|-
picker.setValue（值，持续时间） | 设置新的选择器值。values是一个数组，其中每个项表示每列的值。duration - 转换持续时间（毫秒）
picker.getValue（） | 返回当前选择器值
picker.addValue（） | 将值添加到values数组。如果启用了多个选择（带multiple: true参数），则有用
picker.open（） | 打开选择器
picker.close（） | 关闭选择器
picker.destroy（） | 销毁Picker实例并删除所有事件
picker.on（事件，处理程序） | 添加事件处理程序
picker.once（事件，处理程序） | 添加将在触发后删除的事件处理程序
picker.off（事件，处理程序） | 删除事件处理程序
picker.off（事件） | 删除指定事件的所有处理程序
picker.emit（event，... args） | 实例上的火灾事件
</script></section><section  data-markdown><script type="text/template">
#### 列方法和属性
picker.cols数组中的每一列也都有自己有用的方法和属性。

<font size=5>

属性||
-|-
col.el | 列HTML元素
col.$el | 带有列HTML容器的Dom7实例
col.items | 具有列项HTML元素的Dom7实例
col.value | 当前选择的列值
col.displayValue | 当前选择的列显示值
col.activeIndex | 当前所选/活动项目的索引号
方法|
col.setValue（值，持续时间） | 为当前列设置新值。value是一个新值，duration- 以ms为单位的转换持续时间
col.replaceValues（values，displayValues） | 用新值替换列值和displayValues
</script></section><section  data-markdown><script type="text/template">
#### 事件

<font size=4>

事件 | 目标 | 参数 | 描述
-|-|-|-
change | 选择器 | （picker，value，displayValue） | 当选择器值发生变化时，将触发事件
init | 选择器 | （拾取器） | 选择器初始化时将触发事件
open | 选择器 | （拾取器） | 当Picker开始打开动画时，将触发事件。作为参数，事件处理程序接收选择器实例
opned | 选择器 | （拾取器） | Picker完成其开始动画后将触发事件。作为参数，事件处理程序接收选择器实例
close | 选择器 | （拾取器） | 当Picker开始关闭动画时，将触发事件。作为参数，事件处理程序接收选择器实例
closed | 选择器 | （拾取器） | Picker完成结束动画后将触发事件。作为参数，事件处理程序接收选择器实例
beforeDestroy | 选择器 | （拾取器） | 事件将在Picker实例被销毁之前触发。作为参数，事件处理程序接收选择器实例
</script></section><section  data-markdown><script type="text/template">
### pull to refresh(下拉刷新)
Pull to refresh是一个特殊组件，可用于启动页面内容的刷新。
</script></section><section  data-markdown><script type="text/template">
#### 布局

<font size=6>

```html
<div class="page">
  <!-- Page content must have additional "ptr-content" class -->
  <div class="page-content ptr-content" data-ptr-distance="55" data-ptr-mousewheel="true">
    <!-- Default pull to refresh preloader-->
    <div class="ptr-preloader">
      <div class="preloader"></div>
      <div class="ptr-arrow"></div>
    </div>

    <!-- usual content below -->
    <div class="list">
      ...
    </div>

    <!-- nested scrollable element -->
    <div class="my-scolling-content ptr-watch-scrollable">
      ...
    </div>

    <!-- another nested scrollable element -->
    <div class="another-scolling-content ptr-ignore">
      ...
    </div>
  </div>
</div>
```</script></section><section  data-markdown><script type="text/template">
<font size=5>

- `ptr-content`类。这是启用pull刷新所必需的
- `div class="ptr-preloader"` 隐藏图层用拉动来刷新视觉元素：预加载器和箭头
- `data-ptr-distance="55"`附加属性，允许设置自定义拉动以刷新触发距离。默认情况下（如果未指定）它是44px
- `data-ptr-mousewheel="true"`使用鼠标滚轮（对于桌面应用程序）启用pull来刷新的附加属性。仅适用于PTR顶部。
- ~~`ptr-watch-scrollable` 必须在嵌套的可滚​​动元素上添加的附加类，以防止在这些元素滚动时拉动刷新~~(无效)
- `ptr-ignore` - 必须在嵌套的可滚​​动元素或其他元素上添加的附加类，以防止拉动刷新此类元素滚动或touchmove
</script></section><section  data-markdown><script type="text/template">
#### 方法

- app.ptr.create（el）- 在指定的HTML元素容器上初始化PTR。
- app.ptr.destroy（el）- 从指定的HTML元素中删除PTR事件侦听器
- app.ptr.get（el） - 通过HTML元素获取PTR实例
- app.ptr.done（el） - 重置指定PTR内容元素的PTR状态
- app.ptr.refresh（el） - 在指定的PTR内容元素上触发PTR
</script></section><section  data-markdown><script type="text/template">
#### 事件

<font size=5>

事件 | 目标 | 参数 | 描述
-|-|-|-
pullStart | PTR | （EL） | 当您开始移动拉取内容时，将触发事件。作为参数，事件处理程序接收ptr元素
pullMove | PTR | （el，data） | 当您开始移动拉取内容时，将触发事件。
pullEnd | PTR | （el，data） | 释放pull以刷新内容时将触发事件。作为参数，事件处理程序接收ptr元素
refresh | PTR | （el，done） | 当拉动刷新进入时将触发事件。作为参数，事件处理程序接收ptr元素和done函数以重置PTR状态
DONE | PTR | （EL） | 事件将在PTR实例被销毁之前触发。作为参数，事件处理程序接收ptr元素
beforeDestroy | PTR | （PTR） | 事件将在PTR实例被销毁之前触发。作为参数，事件处理程序接收PTR实例
</script></section><section  data-markdown><script type="text/template">
### popup(弹框)

弹出窗口是一个弹出窗口，其中包含通过App的主要内容弹出的任何HTML内容。弹出窗口，是所谓的叠加的“临时视图”的一部分。
</script></section><section  data-markdown><script type="text/template">
#### 弹出布局
```html
<body>
  ...
  <div class="popup">
    Any HTML content goes here
  </div>
</body>
```
</script></section><section  data-markdown><script type="text/template">
#### 弹出大小

<font size=5>

默认情况下，Popup在手机和平​​板电脑（iPad）上的大小略有不同。在手机上它是全屏的，而在平板电脑上则是630px的宽度和高度。如果您想在平板电脑上制作全屏尺寸，则应在所需弹出窗口中添加其他“ popup-tablet-fullscreen ”类：
```html
<body>
  ...
  <!-- This popup has fullscreen size on tablets -->
  <div class="popup popup-tablet-fullscreen">
    Any HTML content goes here
  </div>
</body>
```
</script></section><section  data-markdown><script type="text/template">
#### 弹出应用方法
- app.popup.create（parameters） - 创建Popup实例
- app.popup.destroy（el） - 销毁Popup实例
- app.popup.get（el） - 通过HTML元素获取Popup实例
- app.popup.open（el，animate） - 打开Popup
</script></section><section  data-markdown><script type="text/template">
#### 弹出参数

<font size=4>

参数 | 类型 | 默认 | 描述
-|-|-|-
el | HTML元素 |  | 弹出元素。如果您的HTML中已经有Popup元素并且想要使用此元素创建新实例，则可能很有用
content | 串 |  | 完整弹出HTML布局字符串。如果要动态创建Popup元素，则非常有用
backdrop | boolean | true | 启用弹出窗口（后面的深半透明层）
backdropEl | HTMLElement 字符串 |  | 自定义背景元素的HTML元素或字符串CSS选择器
closeByBackdropClick | boolean | true | 启用后，将在背景单击时关闭弹出窗口
closeOnEscape | boolean | 假 | 启用后，按ESC键键盘将关闭弹出窗口
animate | boolean | true | 是否应该使用动画打开/关闭弹出窗口。可以覆盖.open()和.close()方法
swipeToClose | boolean 字符串 | 假 | 是否可以使用滑动手势关闭弹出窗口。可以true允许通过向上和向下滑动来关闭弹出窗口，或者可以to-top（字符串）仅允许向上滑动以关闭弹出窗口，或者to-bottom（字符串）仅允许滑动到底部以关闭。
swipeHandler | HTMLElement 字符串 |  | 如果没有通过，则可以刷掉整个弹出窗口以关闭。您可以在此处传递将用作滑动目标的自定义元素的HTML元素或字符串CSS选择器。（swipeToClose必须也启用）
</script></section><section  data-markdown><script type="text/template">
#### 弹出方法

<font size=4>

方法|说明
-|-
popup.open（animate） |打开弹出窗口
|animate - boolean（默认情况下true） - 定义是否应该使用动画打开它
popup.close（animate） |关闭弹出窗口
|animate - boolean（默认情况下true） - 定义是否应该使用动画关闭它
popup.destroy（） |破坏弹出窗口
popup.on（事件，处理程序） |添加事件处理程序
popup.once（事件，处理程序） |添加将在触发后删除的事件处理程序
popup.off（事件，处理程序） |删除事件处理程序
popup.off（事件） |删除指定事件的所有处理程序
popup.emit（event，... args） |实例上的火灾事件
</script></section><section  data-markdown><script type="text/template">
#### 使用链接控制弹出窗口

<font size=5>

- 要打开弹出窗口，我们需要为任何HTML元素添加“ popup-open ”类（首选链接）
- 要关闭弹出窗口，我们需要为任何HTML元素添加“ popup-close ”类（首选链接）
- 如果DOM中有多个弹出窗口，则需要通过此HTML元素上的其他data-popup =“.my-popup”属性指定相应的弹出窗口
</script></section><section  data-markdown><script type="text/template">
#### 弹出事件

<font size=5>

事件 | 描述
-|-
open | Popup启动其开始动画时将触发事件。作为参数，事件处理程序接收弹出实例
opened | Popup完成打开动画后将触发事件。作为参数，事件处理程序接收弹出实例
close | 当Popup开始关闭动画时将触发事件。作为参数，事件处理程序接收弹出实例
closed | Popup完成结束动画后将触发事件。作为参数，事件处理程序接收弹出实例
beforeDestroy | 事件将在Popup实例被销毁之前触发。作为参数，事件处理程序接收弹出实例
</script></section><section  data-markdown><script type="text/template">
>谢谢观看</script></section></div>
    </div>

    <script src="./js/reveal.js"></script>

    <script>
      function extend() {
        var target = {};
        for (var i = 0; i < arguments.length; i++) {
          var source = arguments[i];
          for (var key in source) {
            if (source.hasOwnProperty(key)) {
              target[key] = source[key];
            }
          }
        }
        return target;
      }

      // Optional libraries used to extend on reveal.js
      var deps = [
        { src: './plugin/markdown/marked.js', condition: function() { return !!document.querySelector('[data-markdown]'); } },
        { src: './plugin/markdown/markdown.js', condition: function() { return !!document.querySelector('[data-markdown]'); } },
        { src: './plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
        { src: './plugin/zoom-js/zoom.js', async: true },
        { src: './plugin/notes/notes.js', async: true },
        { src: './plugin/math/math.js', async: true }
      ];

      // default options to init reveal.js
      var defaultOptions = {
        controls: true,
        progress: true,
        history: true,
        center: true,
        transition: 'default', // none/fade/slide/convex/concave/zoom
        dependencies: deps
      };

      // options from URL query string
      var queryOptions = Reveal.getQueryHash() || {};

      var options = extend(defaultOptions, {}, queryOptions);
    </script>


    <script>
      Reveal.initialize(options);
    </script>
  </body>
</html>
